import { useRef } from 'react';
import { Tag } from 'antd';
import { QueryTable } from '@/components/QueryTable';

import './index.less';
import {
  operateTypeMap,
  operateTypeSearchMap,
  statusMap,
  statusSearchMap,
} from '@/utils/const';

export default function Log(props) {
  const tableRef = useRef();

  const columns = [
    {
      dataIndex: 'operateTitle',
      key: 'operateTitle',
      title: '操作标题',
      searchConfig: {
        type: 'input',
      },
    },
    {
      dataIndex: 'operateType',
      key: 'operateType',
      ellipsis: true,
      title: '操作类型',
      searchConfig: {
        type: 'select',
        selectConfig: {
          data: operateTypeSearchMap,
        },
      },
      render: (text) => operateTypeMap[text],
    },
    {
      dataIndex: 'status',
      key: 'status',
      title: '状态',
      searchConfig: {
        type: 'select',
        selectConfig: {
          data: statusSearchMap,
        },
      },
      render: (text) => {
        const item = statusMap[text];
        return <Tag color={item?.color}>{item?.text}</Tag>
      }
    },
    // {
    //   dataIndex: 'operateUserId',
    //   key: 'operateUserId',
    //   title: '操作用户ID',
    //   width: 100,
    //   ellipsis: true,
    //   searchConfig: {
    //     type: 'input',
    //   },
    // },
    {
      dataIndex: 'operateUserName',
      key: 'operateUserName',
      title: '操作用户名称',
      width: 100,
      ellipsis: true,
    },
    // {
    //   dataIndex: 'operateDeptId',
    //   key: 'operateDeptId',
    //   title: '操作部门ID',
    // },
    {
      dataIndex: 'operateAddress',
      key: 'operateAddress',
      title: '操作地址',
    },
    {
      dataIndex: 'operateIp',
      key: 'operateIp',
      title: '操作IP',
    },
    {
      dataIndex: 'requestUrl',
      key: 'requestUrl',
      title: '请求URL',
      ellipsis: true,
    },
    {
      dataIndex: 'requestMethod',
      key: 'requestMethod',
      title: '请求方式',
    },
    // {
    //   dataIndex: 'requestParams',
    //   key: 'requestParams',
    //   title: '请求参数',
    // },
    // {
    //   dataIndex: 'responseParams',
    //   key: 'responseParams',
    //   title: '响应参数',
    // },
    {
      dataIndex: 'consumeTime',
      key: 'consumeTime',
      title: '消耗时间',
      render: (text) => `${text}ms`,
    },
    {
      dataIndex: 'createTime',
      key: 'createTime',
      title: '创建时间',
    },
  ];
  return (
    <div className='feedback-container'>
      <QueryTable
        ref={tableRef}
        columns={columns}
        pagingInServer
        requestUrl='/sys/operate/log/page'
        responseDatafield='data'
      // dataObj={{
      //   dataSource: tableData,
      //   total,
      // }}

      // getDataList={getDataList}
      // dataSource={tableData}
      // pagination={false}
      />
    </div>
  );
}
Log.route = {
  [MENU_PATH]: '/setting/log',
};
